<template>
  <div>
    <a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="70%">
      <a-spin :spinning="loading">
        <a-form :form="form">
          <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item class="mb-15" label="回复">
              <a-textarea
                placeholder="请输入" v-model='replyContent'
                v-decorator="[
                  'replyContent',
                  {
                    rules: [{ required: true, message: '请输入', whitespace: true }]
                  }
                ]"
                maxLength="300"
              ></a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { get } from 'lodash'
import { deductionDetail, getBanner } from '@/api/newPet'
import { commentreply } from '@/api'
export default {
  data() {
    return {
      loading: false,
      isShow: true,
      labelCol: {
        span: 8
      },
      content: '<p>Hello World!</p>',

      editorOption: {
        replyContent:'',
        placeholder: '请输入',
        theme: 'snow',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
              [{ script: 'sub' }, { script: 'super' }], // 上标/下标
              [{ indent: '-1' }, { indent: '+1' }], // 缩进
              // [{ direction: 'rtl' }], // 文本方向
              [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              // [{ font: ['songti'] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ['clean'], // 清除文本格式
              ['image'] // 链接、图片，需要视频的可以加上video
            ]
          }
        }
      },
      data: [
        { name: '规格1', img: '', num: 1, price: 0 },
        { name: '规格1', img: '', num: 1, price: 0 }
      ],
      columns: [
        { title: '规格名称', dataIndex: 'name', align: 'center', width: 140, scopedSlots: { customRender: 'name' } },
        {
          title: '规格图片',
          dataIndex: 'img',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'img' }
        },
        { title: '规格库存', dataIndex: 'num', align: 'center', width: 70, scopedSlots: { customRender: 'num' } },
        {
          title: '规格价格（元）',
          dataIndex: 'price',
          align: 'center',
          width: 70,
          scopedSlots: { customRender: 'price' }
        },
        {
          title: '老用户专享最高可售库存',
          dataIndex: 'msNum',
          align: 'center',
          width: 110,
          scopedSlots: { customRender: 'price' }
        },
        {
          title: '老用户最低价格（元）',
          dataIndex: 'msPrice',
          align: 'center',
          width: 110,
          scopedSlots: { customRender: 'price' }
        },
        {
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          width: 110,
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],

      wrapperCol: {
        span: 16
      },
      details: {},
      showModal: false,
      titles: '新增',
      info: {},
      form: this.$form.createForm(this)
    }
  },
  computed: {},
  watch: {},
  async created() {},
  components: {
    quillEditor
  },
  methods: {
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    // 内容改变事件，只需要这一个方法就够了
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    },
    formgetFileLength(type) {
      //获取图片
      return get(this.form.getFieldValue(type), 'length') || 0
    },
    formuploadSuccess(data, type) {
      this.form.setFieldsValue({
        images: [...this.form.getFieldValue(type), data.path]
      })
    },
    changeSelect(e) {
      console.log(e)
    },
    onChange(e) {
      console.log(e.target.value)
    },
    cancel() {
      this.form.resetFields()
      this.showModal = false
    },
    confirmOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          // this.loading = true
          const { info } = this

          let data = {
            id:this.info.id,
            replyContent:this.replyContent
          }
          const fun = commentreply
          fun(data)
            .then(() => {
              this.$message.success('回复成功')
              this.$emit('upload')
              this.cancel()
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    getData() {
      this.loading = true
      deductionDetail({ id: 1 })
        .then(data => {
          this.details = data
        })
        .finally(() => (this.loading = false))
    },
    open(data) {
      this.info = data
      console.log(data, '111111')
      if (data.id) {
        this.titles = '修改'
      } else {
        this.titles = '新增'
      }
      this.showModal = true
      // images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
      this.$nextTick(() => {
        this.form.setFieldsValue({
          isEnabled: true
        })
      })
      // this.$emit('upload')
      // this.$nextTick(() => {
      //     this.form.setFieldsValue({
      // 					...res
      // 				})

      // 			})
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-label {
  // width: 100px;
}
</style>
